<template>
  <div class="app-container">

   <div class="filter-container">
    
      <el-select v-model="selectToolsValue"  placeholder="订单分类查询" class='inp_search' @change="changeValue(selectToolsValue)">
          <el-option
          v-for="item in optionsTools"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>

      <el-input style='margin-top:10px;margin-left:1%;'
          placeholder="输入查询"
          v-model="input_conten"
          clearable class='inp_search'>
      </el-input>

      <el-select v-model="selectOrderValue"  placeholder="订单类型" class='inp_search'>
          <el-option
          v-for="item in orderType"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>

      <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions" @change='changeData(value2)'>
    </el-date-picker>
      
      <el-button style='margin-top:10px;' class="filter-item" type="primary" icon="el-icon-search"  @click='searchList'>
        搜索
      </el-button>
      <el-button style='margin-top:10px;' class="filter-item" type="primary" icon="el-icon-download"  @click='handleDownload'>
        导出Excel
      </el-button>
      <el-button  class="filter-item" type="primary" icon="el-icon-refresh"  @click="resList">
        重置
      </el-button>
     
    </div>
     
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="订单号" width="200" align="center">
        <template scope="scope"> 
           <span v-if="scope.row.orderId === null">--</span>
           <span v-else> {{scope.row.orderId}} </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="日期" width="200" >
        <template scope="scope">
          <span v-if="scope.row.date === null">--</span>
          <span v-else>{{dataIntercept(scope.row.date)}}时</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="200" align="center">
        <template scope="scope"> 
          <!-- type 1：道路救援 2：车辆维保 3：耗材购买 4：其他需求 -->
           <span v-if="scope.row.type == '' ">--</span>
           <span v-else-if="scope.row.type == 1"> 道路救援 </span>
           <span v-else-if="scope.row.type == 2"> 车辆维保 </span>
           <span v-else-if="scope.row.type == 3"> 耗材购买 </span>
           <span v-else> 其他需求</span>
        </template>
      </el-table-column>

      <el-table-column label="订单状态" width="120" align="center">
        <template scope="scope">
          <!-- state 0：待联系 1：待上门 2：维修中 3：待付款 4：已完成 5：已取消 -->
          <span  v-if="scope.row.state == ''">--</span>
           <span v-else-if="scope.row.state == 0"> 待联系 </span>
           <span v-else-if="scope.row.state == 1"> 待上门 </span> 
           <span v-else-if="scope.row.state == 2"> 维修中 </span> 
           <span v-else-if="scope.row.state == 3"> 待付款 </span> 
           <span v-else-if="scope.row.state == 4"> 已完成 </span> 
           <span v-else> 已取消 </span> 
        </template>
      </el-table-column>

      <el-table-column label="应付金额" width="120" align="center">
        <template scope="scope">
           <span v-if="scope.row.needPrice === null">--</span>
           <span v-else> {{scope.row.needPrice}}￥ </span>
        </template>
      </el-table-column>

       <el-table-column label="实际支付" width="120" align="center">
        <template scope="scope">
            <span v-if="scope.row.realPrice === null">--</span>
            <span v-else> {{scope.row.realPrice}}￥ </span>
        </template>
      </el-table-column>

      <el-table-column label="地址" min-width="200" align="center">
        <template scope="scope">
             <span v-if="scope.row.address === null">--</span>
             <span v-else> {{scope.row.address}}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户手机号" width="120" align="center">
        <template scope="scope">
           <span v-if="scope.row.userPhone === null">--</span>
           <span v-else> {{scope.row.userPhone}} </span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话" width="120" align="center">
        <template scope="scope">
           <span v-if="scope.row.concatPhone === null">--</span>
           <span v-else> {{scope.row.concatPhone}} </span>
        </template>
      </el-table-column>

      <el-table-column label="门店" width="120" align="center">
        <template scope="scope">
          <span v-if="scope.row.storeName === null">--</span>
           <span v-else> {{scope.row.storeName}} </span>
        </template>
      </el-table-column>

      <el-table-column label="门店手机号" width="120" align="center">
        <template scope="scope">
          <span v-if="scope.row.storePhone === null">--</span>
           <span v-else> {{scope.row.storePhone}} </span>
        </template>
      </el-table-column>

      <el-table-column label="维修人员手机号" width="120" align="center">
        <template scope="scope">
           <span v-if="scope.row.staffPhone === null">--</span>
           <span v-else> {{scope.row.staffPhone}} </span>
        </template>
      </el-table-column>

      <el-table-column :v-show="isShow" label="维修人员" width="120" align="center">
        <template scope="scope">
           <span v-if="scope.row.staffName === null">--</span>
           <span v-else> {{scope.row.staffName}} </span>
        </template>
      </el-table-column>

      <el-table-column label="耗材费" min-width="120" align="center">
        <template scope="scope">
            <span v-if="scope.row.consumablePrice === null">--</span>
            <span v-else> {{scope.row.consumablePrice}}￥ </span>
        </template>
      </el-table-column>

      <el-table-column label="耗材备注" min-width="120" align="center" >
        <template scope="scope">
           <span v-if="scope.row.orderRequirement === null">--</span>
             <span v-else> {{scope.row.orderRequirement}}</span>
        </template>
      </el-table-column>

       <el-table-column label="工时费" min-width="120" align="center" >
        <template scope="scope">
           <span v-if="scope.row.workPrice === null">--</span>
             <span v-else> {{scope.row.workPrice}}￥</span>
        </template>
      </el-table-column>
     
      <el-table-column label="优惠券" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.coupon === null">--</span>
             <span v-else> {{scope.row.coupon}}</span>
        </template>
      </el-table-column>

      <el-table-column label="总部利润系数" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.headquantersDistribution === null">--</span>
             <span v-else> {{scope.row.headquantersDistribution}}</span>
        </template>
      </el-table-column>

      <el-table-column label="总部核算系数" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.headquantersAssessment === null">--</span>
             <span v-else> {{scope.row.headquantersAssessment}}</span>
        </template>
      </el-table-column>

       <el-table-column label="总部订单分润" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.headquantersDistribution === null || scope.row.headquantersAssessment === null ">--</span>
             <span v-else> {{countGeneralPorFit(scope.row.headquantersDistribution,scope.row.realPrice,scope.row.headquantersAssessment,scope.row.workPrice,scope.row.consumablePrice)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="门店利润系数" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.storeDistribution === null">--</span>
             <span v-else> {{scope.row.storeDistribution}}</span>
        </template>
      </el-table-column>

      <el-table-column label="门店核算系数" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.storeAssessme === null">--</span>
             <span v-else> {{scope.row.storeAssessme}}</span>
        </template>
      </el-table-column>

      <el-table-column label="门店订单分润" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.storeDistribution === null || scope.row.storeAssessme === null">--</span>
             <span v-else> {{countStorePorFit(scope.row.storeDistribution,scope.row.storeAssessme,scope.row.realPrice,scope.row.workPrice,scope.row.consumablePrice)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工利润系数" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.staffDistribution === null">--</span>
             <span v-else> {{scope.row.staffDistribution}}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工核算系数" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.staffAssessment === null">--</span>
             <span v-else> {{scope.row.staffAssessment}}</span>
        </template>
      </el-table-column>

      <el-table-column label="员工订单分润" min-width="120" align="center">
        <template scope="scope">
             <span v-if="scope.row.staffDistribution === null || scope.row.staffAssessment === null ">--</span>
             <span v-else> {{countStaffPorFit(scope.row.staffDistribution,scope.row.staffAssessment,scope.row.realPrice,scope.row.workPrice,scope.row.consumablePrice)}}</span>
        </template>
      </el-table-column>

      <el-table-column  fixed="right" label="操作" min-width="220" align="center">
        <template scope="scope">
            <el-button v-if="scope.row.state ==5"  size="mini" >已取消</el-button> 
            <el-button v-else type="danger" size="mini" @click="cancelOrder(scope.$index, scope.row)">取消订单</el-button> 
            <el-button v-if="scope.row.state ==0" type="primary" size="mini" @click="confirmOrder(scope.$index, scope.row,'confirmOrder')">确认订单</el-button> 
            <el-button v-if='scope.row.state ==1||scope.row.state ==2||scope.row.state ==3||scope.row.state ==4' type="warning" size="mini" @click="modifyOrder(scope.$index, scope.row,'modifyOrder')">修改订单</el-button> 
            
        </template>
      </el-table-column>
    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"  @pagination="fetchData"/>

   <!-- 确认订单/订单详情 -->
  <div class='formPosition' v-if='orderForm === true'>
   <div class='titleForm'>
          <div class='left_titleForm'>{{titleName}}</div>
          <span class="icon iconfont right_titleForm" @click="orderForm = false">&#xe72d;</span>
   </div>
      <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm " :visible.sync="orderForm">
           <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item class='formItemStyle' label="订单ID" prop="orderId">
                      <el-input v-model="ruleForm.date" ></el-input>
                  </el-form-item>
                </el-col>
                
                <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="用户手机号" >
                      <el-input v-model="ruleForm.userPhone" readonly></el-input>
                  </el-form-item>
                </el-col>
          </el-row>

           <el-row :gutter="20">
             <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="联系电话" prop="concatPhone">
                      <el-input v-model="ruleForm.concatPhone"></el-input>
                  </el-form-item>
                </el-col>
               
                <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="用户名" prop="userName">
                      <el-input v-model="ruleForm.userName"></el-input>
                  </el-form-item>
                </el-col>
          </el-row>
          
          <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="车牌号" prop="carNum">
                      <el-input v-model="ruleForm.carNum"></el-input>
                  </el-form-item>
                </el-col>
                
                <el-col :span="12">
                 <el-form-item  class='formItemStyle' label="类型" >
                      <el-input v-model="typeText" readonly></el-input>
                  </el-form-item>
                </el-col>
               
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
                   <el-form-item  class='formItemStyle' label="订单状态" prop="state">
                      <el-input v-model="stateText" readonly ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="应付金额" prop="needPrice">
                      <el-input v-model.number="ruleForm.needPrice"></el-input>
                  </el-form-item>
                </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
                   <el-form-item  class='formItemStyle' label="耗材费" prop="consumablePrice">
                      <el-input v-model.number="ruleForm.consumablePrice"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="耗材备注" >
                      <el-input type="textarea"  v-model="ruleForm.orderRequirement">  </el-input>
                  </el-form-item>
                </el-col>
                
          </el-row>

          <el-row :gutter="20">
              <el-col :span="12">
                   <el-form-item  class='formItemStyle' label="工时费" prop="workPrice">
                      <el-input type="textarea"   v-model.number="ruleForm.workPrice" readonly>  </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item  class='formItemStyle' label="客户需求" prop="consumableRemarks">
                      <el-input type="textarea"   v-model="ruleForm.consumableRemarks">  </el-input>
                  </el-form-item>
                </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item  class='formItemStyle' label="门店" prop="addSelectStores">
                      <el-select v-model="ruleForm.addSelectStores"  placeholder="请选择" class='select_roles' @change="getStaff(ruleForm.addSelectStores)">
                            <el-option
                            v-for="item in optionsStores"
                            :key="item.userId"
                            :label="item.userName"
                            :value="item.phone">  
                            </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12" >
                   <el-form-item  class='formItemStyle' label="维修人员" prop='addSelectstaff'>
                      <el-select ref="addSelectstaff" v-model="ruleForm.addSelectstaff"  placeholder="请选择" class='select_roles' @change="changeStaff(ruleForm.addSelectstaff)">
                            <el-option
                            v-for="item in optionsstaff"
                            :key="item.phone"
                            :label="item.userName"
                            :value="item.phone">
                            </el-option>
                      </el-select>
                  </el-form-item>
                </el-col> 
                
          </el-row>

          <el-row :gutter="20">
              <el-col :span="12">
                   <el-form-item  class='formItemStyle' label="地址" prop="address">
                      <el-input v-model="ruleForm.address"></el-input>
                  </el-form-item>
                </el-col>
          </el-row>

           <el-form-item  >
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          <el-button @click="resetForm('ruleForm')">关闭</el-button>
          </el-form-item>

     </el-form>
    </div>

  </div>
   
   
  
</template>

<script>
import { getOrderManageList ,searchByOrderId ,getOrderMakeUp ,delOrderById ,searchByUserPhone ,searchByStorePhone ,searchByStaff ,modifyOrderManage ,getUserByRole ,getUserByStaff ,sendMsgByPhone} from '@/api/orderManage'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
       }, 
      isShow:false,
      value2: '',
      titleName:'',
      formStatue:'',
      input_conten:'',
      select_time:'',
      NEWDATASTAR:'',
      NEWDATAEND:'',
      optionsTools:[{
          value: '0',
          label: '无'
      },
      {
          value: '2',
          label: '用户手机号'
      },
       {
          value: '3',
          label: '门店手机号'
      },{
          value: '4',
          label: '员工手机号'
      },{
          value: '1',
          label: '门店ID'
      }],
      optionsState:[{
          value: '0',
          label: '待联系'
      },
      {
          value: '1',
          label: '待上门'
      },
      {
          value: '2',
          label: '维修中'
      },
      {
          value: '3',
          label: '待付款'
      },
      {
          value: '4',
          label: '已完成'
      },
       {
          value: '5',
          label: '已取消'
      }],
      orderType:[{
          value: '0',
          label: '无'
      },{
          value: '1',
          label: '道路救援'
      },
      {
          value: '2',
          label: '车辆维保'
      },
      {
          value: '3',
          label: '耗材购买'
      },{
          value: '4',
          label: '其他需求'
      }],
      selectOrderValue:'',
      optionsStores: [], 
      optionsstaff: [],
      optionsType:[{//类型
          value: '道路救援',
          label: '道路救援'
        },{
          value: '车辆维保',
          label: '车辆维保'
        }, ],
      selectToolsValue:'',
      selectState:'',
      addSelectStores:'',
      addSelectstaff:'',
      addSelectType:'',
      list: null,
      total: 0,
      listLoading: true,
      listQuery:{
         page: 1,
         limit: 10,
      },
      orderForm:false,
      stateText:'',
      typeText:'',
      generalProfit:'',
      storeProfit:'',
      staffProfit:'',
      generalAssess:'',
      storeAssess:'',
      staffAssess:'',
      generalPorFit:'',
      storePorFit:'',
      staffPorFit:'',
      ruleForm: {
          address: '',
          date: '',
          userName:'',
          userPhone:'',
          concatPhone:'',
          carNum:'',
          type:'',
          storePhone:'',
          needPrice:'',
          realPrice:'',
          address:'',
          orderRequirement:'',
          staffPhone:'',
          staffName:'',
          consumablePrice:'',
          consumableRemarks:'',
          workPrice:'',
          carNum:'',
          coupon:'',
          couponId:'',
          listId:'',
          orderId:'',
          state:'',
          storeName:'',
          addSelectStores:'',
          addSelectstaff:'',
          storeId:'',
          userId:'',
        },
        cleanForm: {
          address: '',
          date: '',
          userName:'',
          userPhone:'',
          concatPhone:'',
          carNum:'',
          type:'',
          storePhone:'',
          needPrice:'',
          realPrice:'',
          address:'',
          orderRequirement:'',
          staffPhone:'',
          staffName:'',
          consumablePrice:'',
          consumableRemarks:'',
          workPrice:"",
          carNum:'',
          coupon:'',
          couponId:'',
          listId:'',
          orderId:'',
          state:'',
          storeName:'',
          addSelectStores:'',
          addSelectstaff:'',
          storeId:'',
          userId:'',
        },
        rules: {
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          userPhone: [
            { required: true, message: '请输入用户手机号', trigger: 'blur' },
          ],
          concatPhone:[
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            {
            pattern: /^1[0-9]{10}$/,
            message: '联系电话格式不对',
            trigger: 'blur'
          },
          ],
          carNum: [
            { required: true, message: '请输入车牌号', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请输入救援类型', trigger: 'blur' },
          ],
          storePhone: [
            { required: true, message: '请输入门店手机号', trigger: 'blur' },
          ],
          needPrice: [
            {type: 'number', required: false, message: '请输入正确格式的应付金额', trigger: 'blur' },
          ],
          realPrice: [
            {type: 'number', required: false, message: '请输入正确格式的实付金额', trigger: 'blur' },
          ],
          consumablePrice: [
            {type: 'number', required: false, message: '请输入正确格式的耗材费', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
          orderRequirement: [
            { required: true, message: '请输入耗材备注', trigger: 'blur' },
          ],
          staffPhone: [
            { required: true, message: '请输入员工手机号', trigger: 'blur' },
          ],
          consumableRemarks: [
            { required: false, message: '请输入用户需求', trigger: 'blur' },
          ],
          addSelectstaff:[
            { required: true, message: '请选择维修人员', trigger: 'blur' },
          ],
          addSelectStores:[
            { required: true, message: '请选择门店', trigger: 'blur' },
          ]
        }
    }
  },
  created() {
    this.fetchData();
   
  },
  methods: {
    dataIntercept(data){//处理日期
       data = data.substring(0,13);
       return data;
    },
     sendMassage() {
       if((this.ruleForm.addSelectstaff=='')||(this.ruleForm.addSelectstaff== undefined)){
          this.$message({
            message: '请先选择维修人员',
            type: 'warning',
            duration: 2000
          });
          return false
       }
       if((this.ruleForm.userPhone=='')||(this.ruleForm.userPhone== undefined)){
          this.$message({
            message: '请输入用户手机号',
            type: 'warning',
            duration: 2000
          });
          return false
       }
        const paramsData = {
               recivePhone:this.ruleForm.addSelectstaff,
               sendPhone:this.ruleForm.userPhone
          }
          sendMsgByPhone(paramsData).then(res => {
            if(res.code==200){
                this.$notify({
                        message: '用户手机号已经成功发送给维修人员',
                        type: 'success',
                        duration: 2000
                    })
            }else{
                this.$notify({
                        message: '用户手机号未发送给维修人员',
                        type: 'error',
                        duration: 2000
                    })
            }
          })
      },
    fetchData() {
      this.listLoading = true
      const paramsData = {curPage:this.listQuery.page,pageSize:this.listQuery.limit}
      getOrderManageList(paramsData).then(res => {
        this.total = res.data.countNum;
        this.list = res.data.obj;
        this.listLoading = false;
      })
       this.generalProfit = localStorage.getItem("generalProfit");
       this.storeProfit = localStorage.getItem("storeProfit");
       this.staffProfit = localStorage.getItem("staffProfit");
       this.generalAssess = localStorage.getItem("generalAssess");
       this.storeAssess = localStorage.getItem("storeAssess");
       this.staffAssess = localStorage.getItem("staffAssess");
    },
    //总订单分润=订单实付-工时费-耗材费
    countGeneralPorFit(distribution,assessment,realPrice,consumablePrice,workPrice){
        this.generalPorFit = (Number(realPrice)-Number(consumablePrice)-Number(workPrice))*Number(distribution)*Number(assessment)
        return this.generalPorFit;
    },
    //门店订单分润=对应订单的总订单分润*门店分润系数*门店考核系数
    countStorePorFit(distribution,assessment,realPrice,consumablePrice,workPrice){
         this.storePorFit = (Number(realPrice)-Number(consumablePrice)-Number(workPrice))*Number(distribution)*Number(assessment)
         return this.storePorFit;
    },
    //员工订单分润=工时费*员工分润系数*员工考核系数
    countStaffPorFit(distribution,assessment,realPrice,consumablePrice,workPrice){
         this.staffPorFit = (Number(realPrice)-Number(consumablePrice)-Number(workPrice))*Number(distribution)*Number(assessment)
         return this.staffPorFit;
    },
   submitForm(formName) {//提交
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.modifyOrderManage(formName);
             
          } else {
            console.log('提交失败!');
            return false;
          }
        });
      },
      handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['订单号', '日期', '类型', '订单状态', '应付金额','实际支付','地址','用户手机号','联系电话','门店',
        '门店手机号','维修人员手机号','耗材金额','工时费','耗材备注','优惠券','总部利润系数','总部核算系数','总部订单分润','门店利润系数','门店核算系数','门店订单分润','员工利润系数','员工核算系数','员工订单分润']
        const filterVal = ['orderId', 'date', 'type', 'state', 'needPrice','realPrice','address','userPhone','concatPhone','storeName',
        'storePhone','staffPhone','consumablePrice','workPrice','orderRequirement','coupon','headquantersDistribution','headquantersAssessment','generalPorFit','storeDistribution','storeAssessme','storePorFit',
        'staffDistribution','storeDistribution','staffPorFit']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '订单管理'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
      resetForm(formName) {
          this.ruleForm = this.cleanForm;
          this.$refs.ruleForm.resetFields();
          this.orderForm = false;  
      },
      modifyOrderManage(formName){//修改提交
        //确认订单时修改订单状态
        if(this.formStatue = 'confirmOrder'){
            this.ruleForm.state =1
        }
          const paramsData = {
                  orderId:this.ruleForm.orderId,
                  userName:this.ruleForm.userName,
                  userPhone:this.ruleForm.userPhone,
                  concatPhone:this.ruleForm.concatPhone,
                  carNum:this.ruleForm.carNum,
                  type:this.ruleForm.type,
                  storePhone:this.ruleForm.addSelectStores,
                  state:this.ruleForm.state,
                  needPrice:this.ruleForm.needPrice,
                  realPrice:this.ruleForm.realPrice,
                  address:this.ruleForm.address,
                  orderRequirement:this.ruleForm.orderRequirement,
                  staffPhone:this.ruleForm.addSelectstaff,
                  staffName:this.ruleForm.staffName,
                  consumablePrice:this.ruleForm.consumablePrice,
                  consumableRemarks:this.ruleForm.consumableRemarks,
                  storeName:this.ruleForm.storeName,
                  storeId:this.ruleForm.storeId,
                  }
          modifyOrderManage(paramsData).then(res => {
                 if(res.code == '200'){
                        this.$notify({
                        message: '成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
              })
          this.listLoading = false;
          this.resetForm(formName) 

      },
      confirmOrder(index, row ,statue){//确认订单
         //初始化门店select的值
         if(row.storeName){
             this.ruleForm.storeName = row.storeName;
             this.ruleForm.storePhone = row.storePhone;
             this.ruleForm.addSelectStores = row.storeName;
         }
         
         //初始化维修人员select的值
         if(row.staffName){
             this.ruleForm.staffName = row.staffName;
             this.ruleForm.staffPhone = row.staffPhone;
             this.ruleForm.addSelectstaff = row.staffName;
         }
         
         this.titleName = '确认订单';
         this.formStatue = statue;
         this.optionsState = row.state;
         this.orderForm = true;
         this.ruleForm = Object.assign({}, row);
         this.judgestate()//订单状态 和 类型 转化
         this.getRole()//获取门店
      },
      judgestate(){//订单状态 和 类型 转化
          //判断订单状态
         if(this.ruleForm.state == 0){  // state 0：待联系 1：待上门 2：维修中 3：待付款 4：已完成 5：已取消
            this.stateText ='待联系'
         }else if(this.ruleForm.state == 1){
            this.stateText ='待上门'
         }else if(this.ruleForm.state == 2){
            this.stateText ='维修中'
         }else if(this.ruleForm.state == 3){
            this.stateText ='待付款'
         }else if(this.ruleForm.state == 4){
            this.stateText ='已完成'
         }else{
           this.stateText ='已取消'
         }
         //判断类型 typeText
         if(this.ruleForm.type == '1' ){ //type 1：道路救援 2：车辆维保 3：耗材购买 4：其他需求
              this.typeText = '道路救援'
         }else if(this.ruleForm.type == '2' ){
              this.typeText = '车辆维保'
         }else if(this.ruleForm.type == '3' ){
              this.typeText = '耗材购买'
         }else{
              this.typeText = '其他需求'
         }
      },
      modifyOrder(index, row ,statue){//修改订单
         //初始化门店select的值
         this.titleName = '修改订单';
         this.formStatue = statue;
         this.orderForm = true;
         this.ruleForm = Object.assign({}, row);
        // this.ruleForm.addSelectstaff = row.staffName;
         if(row.storeName){
             this.ruleForm.storeName = row.storeName;
             this.ruleForm.storePhone = row.storePhone;
             this.ruleForm.addSelectStores = row.storeName;
         }
         //初始化维修人员select的值
         if(row.staffName){
             this.ruleForm.staffName = row.staffName;
             this.ruleForm.staffPhone = row.staffPhone;
             this.ruleForm.addSelectstaff = row.staffName;
         }

         this.judgestate()
         this.getRole()//获取门店
      },
      getRole(){//获取角色/门店
        const para = 1;
        const paramsData = {type:para}
          getUserByRole(paramsData).then(res => {
                    const datas = res.data;
                    this.optionsStores = datas;
                    console.log(datas)
                })
      },
      getStaff(para){//获取员工
          var obj = {};
          obj = this.optionsStores.find(item =>{
              return item.phone === para 
          });
          this.ruleForm.storeName = obj.userName;
          this.ruleForm.storePhone = obj.phone;
          this.ruleForm.userId = obj.userId;
          this.ruleForm.storeId = obj.userId;
          const paramsData = {phone:para}
          getUserByStaff(paramsData).then(res => {
                    this.ruleForm.addSelectstaff ="";
                    this.$forceUpdate();
                    const datas = res.data;
                    this.optionsstaff = datas;
                    if(datas==""){
                       var obj1 = {}
                       obj1.userName = this.ruleForm.storeName;
                       obj1.phone = this.ruleForm.storePhone;
                       obj1.userId = this.ruleForm.userId;
                       this.optionsstaff.push(obj1)
                    }
                })
      },
      changeStaff(data){
          this.ruleForm.addSelectstaff = data;
          for(var i =0;i<this.optionsstaff.length;i++){
             if(this.optionsstaff[i].phone == data){
                this.ruleForm.staffName = this.optionsstaff[i].userName;
                this.$forceUpdate();
             }
          }   
      },
      transformDate(d){
       const newData = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();   
       return newData
    },
    changeData(data){
       if((data == undefined)||(data == null)){
             this.NEWDATASTAR = '';
             this.NEWDATAEND = '';
        }
    },
    changeValue(value){
        this.input_conten = ""
    },
    cancelOrder(index,row){
     row.state = 5;
     const paramsData = {
                  orderId:row.orderId,
                  userName:row.userName,
                  userPhone:row.userPhone,
                  concatPhone:row.concatPhone,
                  carNum:row.carNum,
                  type:row.type,
                  storePhone:row.addSelectStores,
                  state:row.state,
                  needPrice:row.needPrice,
                  realPrice:row.realPrice,
                  address:row.address,
                  orderRequirement:row.orderRequirement,
                  staffPhone:row.addSelectstaff,
                  consumablePrice:row.consumablePrice,
                  consumableRemarks:row.consumableRemarks,
                  storeName:row.storeName
                  }
          modifyOrderManage(paramsData).then(res => {
                 if(res.code == '200'){
                        this.$notify({
                        message: '取消成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '取消失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
              })
          this.listLoading = false;
    },
    resList(){
          this.fetchData();
      },
    searchList(){//搜索
        if((!this.value2)&&(!this.selectOrderValue)&&(!this.selectToolsValue)&&(!this.input_conten)){
           this.fetchData()
           
        }else{
           if(this.value2){//获取时间
                this.NEWDATASTAR = this.transformDate(this.value2[0])
                this.NEWDATAEND = this.transformDate(this.value2[1])
            }
          const paramsData = {
           curPage:this.listQuery.page,
           pageSize:this.listQuery.limit,
           startDate:this.NEWDATASTAR,
           endDate:this.NEWDATAEND,
           orderType:this.selectOrderValue == "" ? 0 : this.selectOrderValue,
           searchType:this.selectToolsValue == "" ? 0 : this.selectToolsValue,
           searchVal:this.input_conten
           }
           getOrderMakeUp(paramsData).then(res => {
                      this.total = res.data.countNum;
                      this.list = res.data.obj;
                  })
        }
        
      }
  }
 }
</script>
<style lang="scss">
.filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
 .inp_search{
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:70%;
    height:auto;
    background:#fff;
    position:absolute;
    left:15%;
    top:5%;
    z-index:999;
    padding:30px;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 5px;
 }
 .demo-ruleForm{
      width:100%!important;
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
 .carImgs{
   width:45px;
   height:45px;
   border-radius:5px;
   margin:0 3px;
 }
 .carImgs1{
   width:60px;
   height:60px;
   border-radius:5px;
   margin:0 3px;
   border:solid 1px #efefef;
 }

</style>
